<template>

  <NavBarCmp :leftArrow="true" :navbarTitle="Title" />

  <div class="cast">

    <ul>
      <li class="cast-item" v-for="(actor, index) in castItems" :key="index">

        <img :src="actor.avatar" alt="" class="avatar">
        <div class="right">
          <div class="name">{{ actor.cnm }}</div>
          <div class="ename">{{ actor.enm }}</div>
          <div class="desc">
            <template v-if="actor.desc === Title"></template>
            <template v-else> {{ actor.desc }}</template>
          </div>
        </div>

      </li>
    </ul>



  </div>



</template>


<script setup>
import { useHead } from '@unhead/vue'

useHead({
  title: '演职人员-猫眼电影'
})


import { computed } from "vue";
import { useStore } from "@/stores/index.js";
const store = useStore();

import { useRoute } from "vue-router";
const route = useRoute();
// const movieId = route.params.movieId;
const castId = route.params.castId; //cr 值

const Title = computed(() => {
  const role = store.formattedCredits.find(item => item.cr === parseInt(castId));
  return role ? role.roleName : 'Cast List';
});

const castItems = computed(() => {
  const role = store.formattedCredits.find(item => item.cr === parseInt(castId));
  return role ? role.items : [];
});
</script>




<style scoped>
.cast {
  margin-top: 50.5px;
}


ul {
  list-style: none;
  padding: 0 10px;
  margin: 0;
  background-color: #fff;
}

.cast-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 15px 0
}

.avatar {
  width: 60px;
  height: 80px;
  display: block;
}

.right {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  margin-left: 20px;

}


.name {
  font-size: 15px;
  color: #333;

}

.ename,
.desc {
  font-size: 14px;
  color: #666;
}
</style>
